<template>
	<view class="content">
		<view class="msg-list">
			<!-- 加载历史数据 -->
			<view class="row" v-for="(row,index) in list" :key="index" :id="'msg'+row.uuid">
				<!-- 系统消息 -->
				<block v-if="row.type=='system'">
					<view class="system">
						<!-- 文字消息 -->
						<view v-if="row.messageType=='text'" class="text">
							{{row.content.text}}
						</view>
						<!-- 领取红包消息 -->
						<view v-if="row.messageType=='redEnvelope'" class="red-envelope">
							<image src="/static/image/im/red-envelope-chat.png"></image>
							{{row.content.text}}
						</view>
					</view>
				</block>
				<!-- 用户消息 -->
				<block v-if="row.type=='user'">
					<!-- 自己发出的消息 -->
					<view class="my" v-if="row.userId==JSON.parse(userInfo).id">
						<!-- 左-消息 -->
						<view class="left">
							<!-- 文字消息 -->
							<u-loading  mode="circle" color="red" v-if="row.isSend==0" style="margin-right: 10px;"></u-loading>
							<view v-if="row.messageType=='text'" class="bubble">
								<u-parse :html="row.content.text" :selectable="true"></u-parse>
								<!-- <rich-text :nodes="row.content.text"></rich-text> -->
							</view>
							<!-- 语言消息 -->
							<view v-if="row.messageType=='voice'" class="bubble voice" @tap="playVoice(row)" >
								<view class="length">{{row.content.length}}</view>
								<view class="iconfont icon-voice"></view>
							</view>
							<!-- 图片消息 -->
							<view v-if="row.messageType=='img'" class="bubble img" @tap="showPic(row)">
								<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
							</view>
							<!-- 视频消息 -->
							<view v-if="row.messageType=='video'" class="video-warp" @click="openVideo(row)">
								<view class="video">
									<image class="image" :src="row.content.videoPath"></image>
									<uni-icons class="videocam-filled" type="videocam-filled" size="40" color="#00aa7f"></uni-icons>
									<view class="v-name">
										<view>{{row.content.fileName}}</view>
									</view>
								</view>
							</view>
							<!-- 红包 -->
							<view v-if="row.messageType=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row,index)">
								<image src="/static/image/im/red-envelope.png"></image>
								<view class="tis">
									<!-- 点击开红包 -->
								</view>
								<view class="blessing">
									{{row.content.blessing}}
								</view>
							</view>
							
						</view>
						<!-- 右-头像 -->
						<view class="right">
							<u-avatar src="" mode="square"></u-avatar>
						</view>
					</view>
					<!-- 别人发出的消息 -->
					<view class="other" v-if="row.userId!=JSON.parse(userInfo).id">
						<!-- 左-头像 -->
						<view class="left">
							<u-avatar src="" mode="square"></u-avatar>
						</view>
						<!-- 右-用户名称-时间-消息 -->
						<view class="right">
							<view class="username">
								<view class="name"></view> <view class="time">12/12/1</view>
							</view>
							<!-- 文字消息 -->
							<view v-if="row.messageType=='text'" class="bubble">
								<u-parse :html="row.content.text" :selectable="true"></u-parse>
								<!-- <rich-text :nodes="row.content.text"></rich-text> -->
							</view>
							<!-- 语音消息 -->
							<view v-if="row.messageType=='voice'" class="bubble voice" @tap="playVoice(row)" >
								<view class="iconfont icon-yuyin2"></view>
								<view class="length">{{row.content.length}}</view>
							</view>
							<!-- 图片消息 -->
							<view v-if="row.messageType=='img'" class="bubble img" @tap="showPic(row)">
								<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
							</view>
							<!-- 视频消息 -->
							<view v-if="row.messageType=='video'" class="video-warp" @click="openVideo(row)">
								<view class="video">
									<image class="image" :src="row.content.videoPath"></image>
									<uni-icons class="videocam-filled" type="videocam-filled" size="40" color="#00aa7f"></uni-icons>
									<view class="v-name">
										<view>{{row.content.fileName}}</view>
									</view>
								</view>
							</view>
							<!-- 红包 -->
							<view v-if="row.messageType=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row,index)">
								<image src="/static/image/im/red-envelope.png"></image>
								<view class="tis">
									<!-- 点击开红包 -->
								</view>
								<view class="blessing">
									{{row.content.blessing}}
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			
		},
		data() {
			return {}
		},
		mounted() {
			that=this
		},
		methods: {}
	}
</script>
<style scoped lang="scss">
	@import "../lz-chat/lz-chat.scss"; 
</style>
